<template>
  <div class="page" @scroll="onScroll">
    <div :class="['header', { sticky: showSticky }]">
      <van-nav-bar v-show="showSticky" title="电影">
        <template #left>
          <CurCity />
        </template>
      </van-nav-bar>

      <van-tabs v-model:active="active" border @change="onTabChange">
        <van-tab name="now-playing" title="正在热映"> </van-tab>
        <van-tab name="coming-soon" title="即将上映"></van-tab>
      </van-tabs>
    </div>

    <RouterView />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import CurCity from "@/components/cur-city.vue";

const route = useRoute();
const router = useRouter();

// 使用 route.name 作为 tab 当前激活 name 的初始值
const active = ref(route.name as string);
// Tab 选项卡切换
function onTabChange(e: any) {
  router.replace({ name: e });
}

// 是否显示顶部
const showSticky = ref(false);
const onScroll = (e: Event) => {
  const target = e.target as HTMLDivElement;
  if (target.scrollTop >= 100) {
    showSticky.value = true;
  } else {
    showSticky.value = false;
  }
};
</script>

<style lang="scss" scoped>
.header.sticky {
  // 粘性
  position: sticky;
  z-index: 1;
  top: 0;
}
</style>
